import { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'

import './index.scss'

const navbarData = ['关注', '推荐', '直播', '畅享', '福利', '视频']

const amoyData = [
  {
      topdata: {
          img1: require('../../assets/homeImg/microImg/micro_logo1.png'),
          text1: 'XX旗舰店',
          text2: '优选品牌  1小时前',
          imgright1: require('../../assets/homeImg/microImg/micro_other1.png'),
          imgright2: require('../../assets/homeImg/microImg/micro_other2.png'),
          imgright3: require('../../assets/icons/twoarrow.png'),
          imgcenter1: require('../../assets/homeImg/microImg/micro_title1.png'),
          textcenter: '#XX智慧屏 XX P40 Pro+ 5G 全网通 8GB+256GB (陶瓷黑)市',
      },
      imgcenter: [
          {
              icon: require('../../assets/homeImg/microImg/micro1.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro2.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro3.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro4.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro5.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro6.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro7.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro8.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro9.png'),
          },
      ],
      imgbottom: {
          text1: '3万人购买',
          imgbottom1: require('../../assets/icons/like.png'),
          text2: '28000',
          imgbottom2: require('../../assets/icons/comment.png'),
          text3: '1298'
      }
  },
  {
      topdata: {
          img1: require('../../assets/homeImg/microImg/micro_logo2.png'),
          text1: 'XX旗舰店',
          text2: '官方品牌  2小时前',
          imgright1: require('../../assets/homeImg/microImg/micro_other1.png'),
          imgright2: require('../../assets/homeImg/microImg/micro_other2.png'),
          imgright3: require('../../assets/icons/twoarrow.png'),
          imgcenter1: require('../../assets/homeImg/microImg/micro_title2.png'),
          textcenter: 'XX旗舰店推出的最新XX手机,内存大,耗电少,高速上网',
      },
      imgcenter: [
          {
              icon: require('../../assets/homeImg/microImg/micro1.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro2.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro3.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro4.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro5.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro6.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro7.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro8.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro9.png'),
          },
      ],
      imgbottom: {
          text1: '3万人购买',
          imgbottom1: require('../../assets/icons/like.png'),
          text2: '28000',
          imgbottom2: require('../../assets/icons/comment.png'),
          text3: '1562'
      }
  },
  {
      topdata: {
          img1: require('../../assets/homeImg/microImg/micro_logo3.png'),
          text1: 'XX旗舰店',
          text2: '优选好店  3小时前',
          imgright1: require('../../assets/homeImg/microImg/micro_other1.png'),
          imgright2: require('../../assets/homeImg/microImg/micro_other2.png'),
          imgright3: require('../../assets/icons/twoarrow.png'),
          imgcenter1: require('../../assets/homeImg/microImg/micro_title3.png'),
          textcenter: 'XX手机，高效智能，支持语音模式',
      },
      imgcenter: [
          {
              icon: require('../../assets/homeImg/microImg/micro1.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro2.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro3.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro4.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro5.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro6.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro7.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro8.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro9.png'),
          },
      ],
      imgbottom: {
          text1: '3万人购买',
          imgbottom1: require('../../assets/icons/like.png'),
          text2: '28000',
          imgbottom2: require('../../assets/icons/comment.png'),
          text3: '4212'
      }
  },
  {
      topdata: {
          img1: require('../../assets/homeImg/microImg/micro_logo4.png'),
          text1: 'XX旗舰店',
          text2: '优选品牌  5小时前',
          imgright1: require('../../assets/homeImg/microImg/micro_other1.png'),
          imgright2: require('../../assets/homeImg/microImg/micro_other2.png'),
          imgright3: require('../../assets/icons/twoarrow.png'),
          imgcenter1: require('../../assets/homeImg/microImg/micro_title4.png'),
          textcenter: 'XX Mate 40 5G 全网通 8GB+128GB (亮黑色)',
      },
      imgcenter: [
          {
              icon: require('../../assets/homeImg/microImg/micro1.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro2.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro3.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro4.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro5.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro6.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro7.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro8.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro9.png'),
          },
      ],
      imgbottom: {
          text1: '3万人购买',
          imgbottom1: require('../../assets/icons/like.png'),
          text2: '28000',
          imgbottom2: require('../../assets/icons/comment.png'),
          text3: '2412'
      }
  },
  {
      topdata: {
          img1: require('../../assets/homeImg/microImg/micro_logo5.png'),
          text1: 'XX旗舰店',
          text2: '优选品牌  8小时前',
          imgright1: require('../../assets/homeImg/microImg/micro_other1.png'),
          imgright2: require('../../assets/homeImg/microImg/micro_other2.png'),
          imgright3: require('../../assets/icons/twoarrow.png'),
          imgcenter1: require('../../assets/homeImg/microImg/micro_title5.png'),
          textcenter: '#XX智慧屏 XX P40 Pro+ 5G 全网通 8GB+256GB (陶瓷黑)',
      },
      imgcenter: [
          {
              icon: require('../../assets/homeImg/microImg/micro1.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro2.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro3.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro4.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro5.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro6.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro7.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro8.png'),
          },
          {
              icon: require('../../assets/homeImg/microImg/micro9.png'),
          },
      ],
      imgbottom: {
          text1: '3万人购买',
          imgbottom1: require('../../assets/icons/like.png'),
          text2: '28000',
          imgbottom2: require('../../assets/icons/comment.png'),
          text3: '32·12'
      }
  },
]

function buildItem (param) {
  const beginIndex = param.begin
  const endIndex = param.end
  let tempArray: any[] = []
  for (let index = beginIndex; index < endIndex; ++index) {
      let tempIndex = index % amoyData.length
      let tempValue = JSON.parse(JSON.stringify(amoyData[tempIndex]))
      tempValue.index = index + 1
      tempArray.push(tempValue)
  }
  return tempArray
}

function Index () {
  const [list] = useState(buildItem({ begin: 0, end: 10 }))

  return (
    <View className='container'>
      <View className='clf-navbar'>
        {navbarData.map(item => (
          <Text className='clf-navbar-item'>{item}</Text>
        ))}
      </View>
      {
        list.map(item => (
          <View className="clf-content">
            <View className="clf-list-top">
              <View className="clf-list-top-left">
                <Image className="clf-list-top-left-image" src={ item.topdata.img1 } mode='aspectFit' />
                <View className="clf-list-top-left-div">
                  <Text className="clf-list-top-text1">{ item.topdata.text1 }</Text>
                  <Text className="clf-list-top-text2">{ item.topdata.text2 }</Text>
                </View>
              </View>
              <View className="clf-list-top-right">
                <Image className="clf-list-top-right-image1" src={ item.topdata.imgright1 } mode='aspectFit' />
                <Image className="clf-list-top-right-image1" src={ item.topdata.imgright2 } mode='aspectFit' />
                <Image className="clf-list-top-right-image2" src={ item.topdata.imgright3 } mode='aspectFit' />
              </View>
            </View>
            <View className="clf-list-center1">
              <Image src={ item.topdata.imgcenter1 } className="clf-list-center1-image" mode='aspectFit' />
              <Text className="clf-list-center1-text">{ item.topdata.textcenter }</Text>
            </View>
            <View className="clf-list-center2">
              {
                item.imgcenter.map(img => (
                  <View className="clf-list-center2-img-wrapper">
                    <Image className="clf-list-center2-img" src={ img.icon }  />
                  </View>
                ))
              }
            </View>
            <View className="clf-list-bottom">
                <Text className="clf-list-bottom-text">{ item.imgbottom.text1 }</Text>
                <View className="clf-list-bottom-div">
                    <Image className="clf-list-bottom-img" src={ item.imgbottom.imgbottom1 } />
                    <Text className="clf-list-bottom-text">{ item.imgbottom.text2 }</Text>
                    <Image className="clf-list-bottom-img" src={ item.imgbottom.imgbottom2 } />
                    <Text className="clf-list-bottom-text">{ item.imgbottom.text3 }</Text>
                </View>
            </View>
          </View>
        ))
      }
    </View>
  )
}


export default Index

